<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header_warpper">
        <el-menu :default-active="activeIndex2" class="el-menu-demo topWarpper" mode="horizontal" :ellipsis="false"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

          <el-menu-item index="1"><el-image style="width: 140px; height: 100px" :src="logo"  /></el-menu-item>
          <el-menu-item index="2" @click="routeToHistory()" class="top_item">我的调解</el-menu-item>
          <el-menu-item index="3" @click="routeToApply()" class="top_item">申请调解</el-menu-item>
          <el-menu-item index="4" @click="routeToRepay()" class="top_item">还款方案</el-menu-item>
          <el-sub-menu index="5">
            <template #title><span class="text_center">{{ telPhoneNum }}</span></template>
            <el-menu-item index="5-1" @click="updateInfo()">个人信息</el-menu-item>
            <el-menu-item index="5-2" @click="logOut()">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>

      <el-main class="main_body">
        <div class="main_container">
          <router-view></router-view>
          <el-dialog v-model="applicantDialog" title="个人信息" width="30%">
            <el-form label-width="120px" style="padding-right: 30px">
              <el-form-item label="姓名">
                <!-- <el-input v-model="applicant.name"></el-input> -->
                <span>{{ applicant.name }}</span>
              </el-form-item>
              <el-form-item label="手机号">
                <!-- <el-input v-model="applicant.phone" minlength="11" maxlength="11"></el-input>-->
                <span>{{ telPhoneNum }}</span>
              </el-form-item>
              <el-form-item label="身份证号">
                <!-- <el-input v-model="applicant.idNum" minlength="18" maxlength="18"></el-input>
                  -->
                <span>{{ idNum }}</span>
              </el-form-item>
              <el-form-item label="律师证号">
                <!-- <el-input v-model="applicant.lawnNum" minlength="17" maxlength="17"></el-input> -->
                <span>{{ lawnNum }}</span>
              </el-form-item>
              <el-form-item label="机构名称">
                <!-- <el-input v-model="applicantIns.name"></el-input> -->
                <span>{{ applicantIns.name }}</span>
              </el-form-item>
              <el-form-item label="电子邮箱">
                <el-input v-model="applicant.email"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancleUpdate">取消</el-button>
                <el-button type="primary" @click="submitUpdate"> 修改 </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </el-main>

      <el-footer>
        <div class="footer-content">
          <div class="footer-section">
            <h3>关于我们</h3>
            <p>快捷调解，一网打尽，省时省力更省心！</p>
          </div>
          <div class="footer-section">
            <h3>联系我们</h3>
            <p>电话: 18193116636</p>
            <p>邮箱: contact@example.com</p>
            <div class="social-icons">
              <a href="https://www.facebook.com" target="_blank"><i class="el-icon-facebook"></i></a>
              <a href="https://www.twitter.com" target="_blank"><i class="el-icon-twitter"></i></a>
              <a href="https://www.linkedin.com" target="_blank"><i class="el-icon-linkedin"></i></a>
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>

</template>

<script lang="ts" setup>
import router from '@/router';
import { ref, onMounted, Ref ,watch} from 'vue';
import { RouterView, useRoute } from 'vue-router';
import useUserStore from '@/stores/userStore';
import useApplicantStore from '@/stores/applicantStore';
import { getApplicant, getApplicationInstByUserId, updateApplicant } from '@/axios/applicant/applicantReq';
import Applicant from '@/types/response/applicant';
import ApplicantIns from '@/types/response/applicantIns';
import { ElMessage } from 'element-plus';
import Notice from '@/utils/notice';
import logo from '@/assets/logo.png'

const route = useRoute()
const userStore = useUserStore()
const applicantStore = useApplicantStore()
const telPhoneNum = ref("")
const lawnNum = ref("")
const idNum = ref("")
const applicantInsId = null;
let oldEmail:string = "";
/* const applicantInsId = 231231 */

const applicantDialog = ref(false)
/* const applicant: Ref<Applicant> = ref(null)
const applicantIns: Ref<ApplicantIns> = ref(null) */
const applicant: Ref<Applicant> = ref(new Applicant())
const applicantIns: Ref<ApplicantIns> = ref(new ApplicantIns())
const activeIndex2 = ref(''); // 初始值为空
const logoUrl = "@/assets/logo.png"
/* applicant.value.applicantId  = 11111111111
userStore.userId = applicant.value.applicantId */


onMounted(() => {
  setActiveIndex();
});

watch(() => route.path, () => {
  setActiveIndex();
});

const submitUpdate = async()=>{
  try{
    await updateApplicant(applicant.value)
    applicantDialog.value = false
    Notice.success("修改成功")
  }
  catch(error){
    console.error("修改信息时出错" + error)
    Notice.error("修改信息时出错")
  }
}
const cancleUpdate = ()=>{
  applicant.value.email = oldEmail
  applicantDialog.value = false
}
const setActiveIndex = () => {
  switch (route.path) {
    case '/applicant/history':
      activeIndex2.value = '2';
      break;
    case '/applicant/apply':
      activeIndex2.value = '3';
      break;
    case '/applicant/repayment':
      activeIndex2.value = '4';
      break;
    default:
      activeIndex2.value = '';
  }
};
onMounted(async () => {
  applicant.value = await getApplicant(userStore.userId)
  applicantIns.value = await getApplicationInstByUserId(applicant.value.applicantId)
  applicantStore.applicantInsId = applicantIns.value.applicationInstitutionId
  telPhoneNum.value = applicant.value.phone.slice(0, 3) + '****' + applicant.value.phone.slice(7);
  lawnNum.value = applicant.value.lawnNum.slice(0, 6) + '******' + applicant.value.lawnNum.slice(12);
  idNum.value = applicant.value.idNum.slice(0, 6) + '******' + applicant.value.idNum.slice(12);
})
const updateInfo = () => {
  oldEmail = applicant.value.email
  applicantDialog.value = true

}
function routeToHistory() {
  router.push({
    name: "appHistory",
   /*  params:{
      applicantId:applicant.value.applicantId,
      applicantInsId:applicantInsId
    } */
  })
}
function routeToApply() {
  router.push({
    name: "appApply",
   /*  params:{
      applicantId:applicant.value.applicantId,
      applicantInsId:applicantInsId
    } */
  })
}
function routeToRepay() {
  router.push({
    name: "appRepayment",
    /* params:{
      applicantId:applicant.value.applicantId,
      applicantInsId:applicantInsId
    } */
  })
}
const logOut = ()=>{
  userStore.logout()
}
</script>

<style>
.header_warpper {
  margin-bottom: 30px;
}

.warpper {
  display: flex;
}

.topWarpper {
  width: 100%;
  height: 100px;
}

.el-menu--horizontal>.el-menu-item:nth-child(1) {
  margin-right: auto;
}

.top_item {
  width: 150px;
}

.text_center {
  text-align: center;
  display: block;
  /* 确保它是块级元素 */
  width: 100%;
  /* 占据整个宽度 */
}


.main_container {
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 50px);
  /* 使容器占满整个视口高度 */
  width: 100%;
}


.footer {
  background-color: #545c64;
  color: #fff;
  padding: 20px 0;
  text-align: center;
}

.footer-content {
  border-top: #333 10px solid;
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}

.footer-section {
  flex: 1;
  margin: 0 20px;
}

.footer-section h3 {
  margin-bottom: 10px;
}

.footer-section p {
  margin: 5px 0;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin: 5px 0;
}

.footer-section ul li a {
  color: #fff;
  text-decoration: none;
}

.footer-section ul li a:hover {
  text-decoration: underline;
}

.social-icons a {
  margin: 0 10px;
  color: #fff;
  font-size: 20px;
}

.social-icons a:hover {
  color: #ffd04b;
}
</style>